<template>
    <div style="height: 100%; display: flex;flex-wrap: wrap;align-content: start;justify-content: space-evenly;">
        <template v-for="(elements, type) in categorizedElements" :key="type">
            <Element class="ele" :element="ele"
                v-for="ele in elements" :key="ele.id" @click="() => { $emit('focus', ele) }"></Element>
        </template>
        <i v-for="i in 10" class="ele"></i>
    </div>
</template>

<script setup lang="ts">
import { useRoom } from '@/stores/room';
import { computed } from 'vue';
import type { element } from '@/ts/element';
import Element from './Element.vue';
const room = useRoom()
const categorizedElements = computed(() => {
    const sortedElements = Object.keys(room.usingRoom.elementList)
        .sort()
        .map(key => room.usingRoom.elementList[key]);

    return sortedElements.reduce((acc, element) => {
        const type = element.type || 'unknown';
        if (!acc[type]) {
            acc[type] = [];
        }
        acc[type].push(element);
        return acc;
    }, {} as Record<string, element[]>);
});
</script>

<style scoped>
.ele {
    flex-grow: 0;
    width: 240px;
    margin-bottom: 10px;
}
</style>